/*
 * @Author: jiu yin
 * @Date: 2024-05-09 16:34:14
 * @LastEditTime: 2024-06-18 10:57:21
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\pico\component\PicoInfo.tsx
 * jiu
 */
import { edit_device_status } from "@/api/home";
import pico from "@/assets/image/pico.png";
import PicoStatus from "@/comment/PicoStatus";
import ShowPropsConfirm from "@/comment/delete_two/index.tsx";
import User_avatar from "@/comment/user_avatar";
import { useRoute } from "@/hooks";
import { Button, QRCode, message } from "antd";
import { useState } from "react";
import EditModal from "./EditModal";
import PicoTest from "./PicoTest";
import Modal_edit from "@/comment/modal_edit";
import Print from "print-js";

export default function PicoInfo(props: any) {
	let { detail, reload } = props;
	const { getParams, push } = useRoute();
	//编辑名称
	let [isModalOpen, setIsModalOpen] = useState(false);
	//测试设备
	let [isModalOpenTest, setIsModalOpenTest] = useState(false);

	//二维码
	let [isModalOpenCode, setIsModalOpenCOde] = useState(false);
	const upload = () => {
		const canvas = document.getElementById("code")?.querySelector("canvas");
		if (canvas) {
			const url = canvas.toDataURL();
			const a = document.createElement("a");
			a.download = "QRCode.png";
			a.href = url;
			document.body.appendChild(a);
			a.click();
			document.body.removeChild(a);
			message.success("下载成功");
		}
	};

	const print = async () => {
		const canvas = document.getElementById("code")?.querySelector("canvas");
		if (!canvas) return message.error("打印失败");
		if (canvas) {
			const url = canvas.toDataURL();
			await Print({
				printable: url,
				type: "image",
				base64: true,
				style: "@page { size: 72mm 297mm; margin: 0; }",
				targetStyles: ["*"], // 允许打印所有样式属性
			});
			// message.success("打印成功");
		}
	};

	//二次弹窗
	const block_up = () => {
		ShowPropsConfirm({
			title: "停用设备",
			content: "确定要停用该设备吗?",
			async callback() {
				await edit_device_status({ status: 2, device_sn: detail.device_sn });
				message.success("停用设备成功");
				reload();
			},
		});
	};
	const remove = () => {
		ShowPropsConfirm({
			async callback() {
				await edit_device_status({ status: 3, device_sn: detail.device_sn });
				message.success("移除设备成功");
				push("/pico/pico");
				reload();
			},
		});
	};
	const start = () => {
		ShowPropsConfirm({
			title: "启用设备",
			content: "确定要启用该设备吗?",
			async callback() {
				await edit_device_status({ status: 1, device_sn: detail.device_sn });
				message.success("启用设备成功");
				reload();
			},
		});
	};

	return (
		<div>
			<section className="bg-#f7f8ff p-20px flex justify-between">
				<div className="flex ">
					<img src={pico} alt="" className="w-120px h-120px bg-#fff border-rd-5px" />
					<div className="ml-20px bg-#fff border-rd-10px">
						<QRCode value={`https://ym2meta.com/bl/4/${detail.device_sn}`} errorLevel={"H"} size={100} />
						<p className="c-#5864FF text-14px text-center  cursor-pointer" onClick={() => setIsModalOpenCOde(true)}>
							点击打印
						</p>
					</div>
					<div className="ml-28px mt-15px">
						<h3 className="c-#161940">{detail.device_name}</h3>
						<ul className="mt-14px">
							<li className="flex items-center">
								<div className="c-#5C5F7A text-14px w-300px">
									型号：<span className="c-#161940 ml-11px">{detail.device_model}</span>
								</div>
								<div className="c-#5C5F7A text-14px flex items-center w-300px">
									设备状态：
									<div className="pico flex justify-end items-center gap-10px font-700 mr-10px">
										<i className="i2"></i>
										<i className="i3"></i>
										{detail.battery}%
									</div>
									<PicoStatus status={detail.status}></PicoStatus>
								</div>
							</li>
							<li className="flex items-center">
								<div className="c-#5C5F7A text-14px w-300px">
									SN： &nbsp;<span className="c-#161940 ml-11px">{detail.device_real_sn}</span>
								</div>

								<div className="c-#5C5F7A text-14px  flex items-center w-300px">
									托管用户：
									<div>
										{detail.host_status == 1 && <span className="c-#161940">待托管</span>}
										{detail.host_status == 2 && <span className="c-#161940">自有</span>}
										{detail.host_status == 3 && (
											<User_avatar
												options={{
													avatar_url: detail.avatar_url,
													nickname: detail.nickname,
													// sex: 1,
													id: detail.user_id,
													color: "#A6A6A6",
												}}
											/>
										)}
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>

				<div className="mt-10px flex gap-10px">
					<Button onClick={() => setIsModalOpenTest(true)}>设备连接测试</Button>
					<Button onClick={() => setIsModalOpen(true)}>编辑设备信息</Button>
					{detail.status == 3 && (
						<Button type="primary" onClick={() => start()}>
							启用设备
						</Button>
					)}
					{detail.status != 3 && (
						<Button danger onClick={() => block_up()}>
							停用设备
						</Button>
					)}

					<Button type="primary" danger onClick={() => remove()}>
						移除设备
					</Button>
				</div>
			</section>
			<section>
				{isModalOpen && <EditModal isModalOpen={[isModalOpen, setIsModalOpen]} reload={reload} detail={detail} />}
				{isModalOpenTest && <PicoTest isModalOpen={[isModalOpenTest, setIsModalOpenTest]}  detail={detail} />}
			</section>

			<section>
				<Modal_edit title="设备二维码" width={400} isModalOpen={[isModalOpenCode, setIsModalOpenCOde]}>
					<div className="flex flex-col items-center mt-32px">
						<div id="code">
							<QRCode value={`https://ym2meta.com/bl/4/${detail.device_sn}`} errorLevel={"H"} size={150} />
						</div>
						<div className="c-#5C5F7A text-14px w-300px text-center mt-10px">
							设备名称：<span className="c-#161940 ml-11px">{detail.device_name}</span>
						</div>
						<div className="c-#5C5F7A text-14px w-300px text-center mt-10px">
							SN：<span className="c-#161940 ml-11px">{detail.device_real_sn}</span>
						</div>
						<div className="flex gap-20px justify-center mt-40px">
							<Button onClick={() => upload()}>下载</Button>
							<Button type="primary" onClick={() => print()}>
								打印
							</Button>
						</div>
					</div>
				</Modal_edit>
			</section>
		</div>
	);
}
